<template>
  <div class="header-sticky" :class="{ show }">
    <!-- 这里添加v-show是因为当鼠标悬停在二级菜单的时候，滚动到顶部时依然显示的问题 -->
    <div class="container" v-show="show">
      <!-- logo -->
      <h1 class="header-sticky__logo">
        <router-link to="/"></router-link>
      </h1>
      <!-- 导航栏 -->
      <Nav />
      <!-- 右边品牌、专题 -->
      <ul class="header-sticky__brand">
        <li>
          <router-link to="/">品牌</router-link>
        </li>
        <li>
          <router-link to="/">专题</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import Nav from './Nav.vue'
defineOptions({
  name: 'HeaderSticky'
})

/** 是否显示吸顶头部 */
const show = ref(false)
/** 窗口滚动事件的事件处理函数 */
function scrollHandler(): void {
  show.value = document.documentElement.scrollTop > 78
}

/** 当前组件在页面中挂载完毕的时候监听窗口的滚动事件 */
onMounted(() => {
  window.addEventListener('scroll', scrollHandler)
})
/** 当前组件在页面中销毁的时候移除窗口的滚动事件 */
onBeforeUnmount(() => {
  window.removeEventListener('scroll', scrollHandler)
})
</script>

<style lang="scss" scoped>
.header-sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 80px;
  background-color: $basic-white;
  box-shadow: 0 2px 2px -2px #ccc;
  border-bottom: solid 1px #e4e4e4;
  transform: translateY(-100px);
  transition: transform 0.3s;

  &.show {
    transform: translateY(0);
  }

  .container {
    display: flex;
    align-items: center;
  }

  &__logo {
    width: 200px;
    height: 80px;
    background: url('../../assets/images/logo.png') no-repeat right 2px;
    background-size: 160px auto;
  }

  &__brand {
    display: flex;
    padding-left: 40px;
    border-left: solid 2px $xtx-color;

    li {
      margin-right: 40px;

      a {
        &:hover {
          color: $xtx-color;
        }
      }
    }
  }
}
</style>
